@import '@/assets/styles/zlst-color.scss';
// 通用样式
.zlst-display-none-important{display: none !important;}
.zlst-display-none{display: none;}
.zlst-display-block-important{display: block !important;}
.zlst-display-block{display: block;}
.zlst-display-inline-block-important{display: inline-block !important;}
.zlst-display-inline-block{display: inline-block;}
.zlst-display-inline-important{display: inline !important;}
.zlst-display-inline{display: inline;}

// position 定位类型
.zlst-relative{position: relative;}
.zlst-absolute{position: absolute;}
.zlst-fixed{position: fixed;}

.fleft{
  float: left;
}
.fright{
  float: right;
}
.clear{
  clear: both;
}
.fixed {
  position: fixed;
}
.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
  min-width: 0;
}
.inline-block{
  display: inline-block;
}
.cursor{
  cursor: pointer;
}
.heightMax{
  height: 100%!important;
}
.widthMax{
  width: 100%!important;
}
.border-top{
  border-top: 1px solid $zlst-border-color;
}
.border-right{
  border-right: 1px solid $zlst-border-color;
}
.border-bottom{
  border-bottom: 1px solid $zlst-border-color;
}
.border-left{
  border-left: 1px solid $zlst-border-color;
}
.border{
  border: 1px solid $zlst-border-color;
}

h1,h2,h3,h4,h5,h6,p,ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}

// 内外边距函数
$var-padding-extend-func:0px 5px 10px 15px 20px 25px 30px;
$var-margin-extend-func:0px 5px 10px 15px 20px 25px 30px;
$var-height-lineHeight-func: 20px 25px 30px 35px;
$var-border-radius-func: 4px 8px 12px 22px 36px;
$var-height-func: 22px 26px 28px 32px 36px;
$var-width-func: 22px 25px 28px 32px 36px;
$var-opacity-func: 0 25 40 60 80 90;
$var-position-extend-func: 5px 10px 16px;
//配置padding的函数
@mixin padding-extend-func($num) {
  .zlst-padding-top-#{$num} {
      padding-top: #{$num};
  }
  .zlst-padding-right-#{$num} {
      padding-right: #{$num};
  }
  .zlst-padding-bottom-#{$num} {
      padding-bottom: #{$num};
  }
  .zlst-padding-left-#{$num} {
      padding-left: #{$num};
  }
  .zlst-padding-#{$num} {
      padding: #{$num};
  }
}
@each $var in $var-padding-extend-func {
  @include padding-extend-func($var);
}

// 配置margin的函数
@mixin margin-extend-func($num) {
  .zlst-margin-top-#{$num} {
      margin-top: #{$num};
  }
  .zlst-margin-right-#{$num} {
      margin-right: #{$num};
  }
  .zlst-margin-bottom-#{$num} {
      margin-bottom: #{$num};
  }
  .zlst-margin-left-#{$num} {
      margin-left: #{$num};
  }
  .zlst-margin-#{$num} {
      margin: #{$num};
  }
}
@each $var in $var-margin-extend-func {
  @include margin-extend-func($var);
}
//配置高度和行高 的函数
@mixin height-lineHeight-func($num){
  .zlst-line-height-#{$num}{
      height:  #{$num};
      line-height:  #{$num};
  }
}
@each $var in $var-height-lineHeight-func {
  @include height-lineHeight-func($var);
}

// 配置圆角的函数
@mixin border-radius-func($num){
  .zlst-border-radius-#{$num}{
      border-radius: #{$num};
  }
}
@each $var in $var-border-radius-func {
  @include border-radius-func($var);
}

// 设置高度的函数
@mixin height-func($num){
  .zlst-height-#{$num}{
      height: #{$num};
  }
}
@each $var in $var-height-func {
  @include height-func($var);
}

// 设置高度的函数
@mixin width-func($num){
  .zlst-width-#{$num}{
      width: #{$num};
  }
}
@each $var in $var-width-func {
  @include width-func($var);
}

// 设置透明度的函数
@mixin opacity-func($num){
  .zlst-opacity-#{$num}{
      opacity: #{$num/100};
  }
}
@each $var in $var-opacity-func {
  @include opacity-func($var);
}

// 设置定位的函数
@mixin position-extend-func($num) {
  .zlst-position-top-#{$num} {
      top: #{$num};
  }
  .zlst-position-right-#{$num} {
      right: #{$num};
  }
  .zlst-position-bottom-#{$num} {
      bottom: #{$num};
  }
  .zlst-position-left-#{$num} {
      left: #{$num};
  }
}
@each $var in $var-position-extend-func {
  @include position-extend-func($var);
}


div::-webkit-scrollbar,body::-webkit-scrollbar
  {
    width: 11px;
    height: 11px;
  }
 /* scroll轨道背景 */
div::-webkit-scrollbar-track,body::-webkit-scrollbar-track
  {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     border-radius: 10px;
     background-color:#d0cdc7;
  }

 /* 滚动条中能上下移动的小块 */
div::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb
  {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
     background-color:#a09d9d;
  }